<template>
	<div class="base-banner-container">
		<div v-for="(item, index) in value" :key="index" class="banner-item-container">
			<img :src="item.pictureUrl" alt="" class="banner-item-pic">
			<span class="banner-item-url">{{item.url}}</span>
			<div class="banner-item-action">
				<i class="fa fa-arrow-up" @click="move(item, index, 'up')"></i>
				<i class="fa fa-arrow-down" @click="move(item, index, 'down')"></i>
				<i class="fa fa-trash" @click="remove(item, index)"></i>
			</div>
		</div>
		<el-button type="primary" class="btn-add" icon="el-icon-plus" title="添加" circle @click="add" size="mini"></el-button>
		<el-dialog title="添加营销banner" :visible.sync="dialogVisible" width="450px">
			<el-form label-width="100px">
				<el-form-item label="Banner图" style="margin-bottom: 22px;">
					<field-upload v-model="pictureUrl" :options="uploadOptions"></field-upload>
				</el-form-item>
				<el-form-item label="跳转地址">
					<el-input v-model="url" placeholder="跳转地址" @keypress.native.enter.prevent="submit"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible=false">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

	import { Message, MessageBox, Notification } from 'element-ui';
	import * as url from '../../api/url'
	import * as constant from '../../constant/index';
	import {validateUrl} from '../../util/tools'

	import FieldUpload from './field-upload';

    export default {
        name: "base-banner",
		components:{
        	FieldUpload,
		},
		props:{
        	options:{
        		// required: true,
			},
        	value:{
        		type: Array,
				required: true,
			}
		},
        data() {
            return {
            	pictureUrl: '',
				url: '',
				dialogVisible: false,
				uploadOptions:{
					action: url.UPLOAD,
					withCredentials: true,
					'list-type': 'picture-card',
					// tip:'仅1张，作为订单列表页图标',

					limit: 1,
					// maxSize: 2,
					// maxWidth: 1000,
					maxHeight: 132,
					// minWidth: 750,
					// minHeight: 1,
					strictEqMax: true,
					extList: constant.COMMON_IMG_EXT,
					multiple: false,
				}
			}
        },
        computed: {},
        methods: {
			add(){
				this.dialogVisible = true;
			},
        	move(item, index, action){
        		if((action === 'up' && index<=0) || (action==='down' && index>=(this.value.length-1))){
        			return;
				}

				let copyValue = [...this.value];
        		let startIndex = action==='up'?index-1: index;
        		let replaceArray = action==='up'?[item, this.value[index-1]]:[this.value[index+1], item];
        		copyValue.splice(startIndex, 2, replaceArray[0], replaceArray[1]);
        		this.$emit('input', copyValue);
			},
			remove(item, index){
				MessageBox({
					title: '',
					message: '确定要删除吗？',
					type: 'warning',
					confirmButtonText: '确定',
					cancelButtonClass: '取消',
					showCancelButton: true,
				}).then(()=>{
					let copyValue = [...this.value];
					copyValue.splice(index, 1);
					this.$emit('input', copyValue);
				}).catch(()=>{});
			},
			submit(){
        		if(!this.pictureUrl){
					Message({
						message: "Banner图不能为空",
						type: 'warning',
					})
					return;
				}
				// if(!this.url){
				// 	Message({
				// 		message: "地址不能为空",
				// 		type: 'warning',
				// 	})
				// 	return;
				// }
				if(this.url && !validateUrl(this.url)) {
					Message({
						message: "请输入合法的url",
						type: 'warning',
					})
					return;
				}

				let copyValue = [...this.value]
				copyValue.push({
					pictureUrl: this.pictureUrl,
					url: this.url
				})
				this.$emit('input', copyValue);
				this.pictureUrl = '';
				this.url = '';
				this.dialogVisible= false;
			}
		},
        mounted() {

        },
        created() {

        },
    }
</script>

<style lang="scss" scoped>
	.base-banner-container{
		.banner-item-container{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			.banner-item-pic{
				width: 80px;
				height: 80px;
				margin-right: 15px;
			}
			.banner-item-url{
				flex: 1;
				margin-right: 15px;
				word-break: break-all;
				line-height: 21px;
			}
			.banner-item-action{
				>i{
					color: #909399;
					margin-right: 5px;
					cursor: pointer;
					&:hover{
						color: #409EFF;
					}
				}
			}
		}
		.btn-add{
			margin: 0;
		}
	}
</style>
